Dit is het pattern-lab van Platform Amsterdam. In deze 'living styleguide' worden de bouwstenen van de nieuwe webstijl van de Gemeente Amsterdam vastgelegd. Van de diverse bouwstenen is de benodigde markup direct over te nemen, en de styling van de componenten is op een herbruikbare manier opgezet.
De opzet van dit pattern-lab is gebaseerd op de principes uit Atomic Design.
De indeling in atomen, moleculen, organismen, templates en pagina's is verder uitgebreid met een onderdeel waarin we het gebruikte grid vastleggen: het Baseline grid, en een onderdeel specifiek voor voorbeelden.
Atomic Design : De indeling toegelicht
1. Atomen
Atomen zijn de kleinste herbruikbare bouwstenen van deze componentenbibliotheek. Deze zullen zelden zelfstandig voorkomen, en krijgen hun specifieke styling vaak pas in de context van een groter geheel: zo heeft een zoekknop...
<input type="submit" value="Zoeken"/>... als zelfstandig atoom geen specifieke stijl, maar als deze als onderdeel van het organisme 'Header search' wordt ingezet, verschijnt de herkenbare rode knop met de witte loupe.
In dit pattern-lab zijn veel atomen om deze reden in de navigatie verborgen: alleen als de atomen ook zelfstandig styling hebben, worden ze gepresenteerd.
2. Moleculen
Moleculen zijn opgebouwd uit atomen, en de specifieke samenstelling voor hun doel geeft ze hun eigen styling.
Zo bestaat een molecuul 'Sitelogo subidentiteit' uit de atomen 'Andreaskruizen' en de 'Sitetitel'. Tezamen vormen ze het herkenbare beeldmerk in de header van de website.
3. Organismen
Organismen zijn weer een 'groter' geheel, opgebouwd uit moleculen. Organismen zijn al een stuk minder abstract, want deze worden heel specifiek voor een bepaalde functionaliteit in de website samengesteld en vormgegeven. Zo is in wezen de primaire navigatie een horizontale lijst, maar kent deze wel een heel specifieke vormgeving en functie.
4. Templates
Templates zijn samenstellingen van bouwstenen. In Platform Amsterdam kennen we heel duidelijk een indeling van pagina's in een header, footer en het gedeelte waar de daadwerkelijke inhoud in staat: main.
Veel van de bouwstenen krijgen pas in de context van zo'n template hun definitieve vorm, omdat ze daarmee 'op hun plaats' vallen.
5. Pagina's
In dit pattern-lab besteden we vooralsnog niet te veel aandacht aan het uiterlijk van de pagina als geheel, omdat deze logischerwijs volgt uit het grid en de daarop geplaatste header, main en footer secties.